<template>
  <div class="page-wrap">
    <el-card shadow="never">
      <div class="toolbar">
        <el-input v-model="filters.search" placeholder="搜索单号/买家" clearable class="w-300" />
        <el-button @click="refresh">查询</el-button>
        <el-button @click="exportCsv">导出</el-button>
      </div>
      <el-table :data="dataList" border stripe>
        <el-table-column prop="sn" label="退货单号" width="180" />
        <el-table-column prop="createdAt" label="日期" width="180" />
        <el-table-column prop="buyer" label="买家" width="120" />
        <el-table-column prop="refundMethod" label="退款方式" width="120">
          <template #default="{ row }">
            <span v-if="row.refundMethod==='original'">原路退回</span>
            <span v-else-if="row.refundMethod==='cash'">现金</span>
            <span v-else-if="row.refundMethod==='stored'">储值</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额" width="120">
          <template #default="{ row }">¥{{ Number(row.amount||0).toFixed(2) }}</template>
        </el-table-column>
        <el-table-column prop="reason" label="原因" min-width="160" />
        <el-table-column prop="operator" label="操作员" width="120" />
      </el-table>
    </el-card>

    <el-dialog v-model="visible" title="创建退货单" width="520px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="商品"><span>{{ currentRow?.name }}（{{ currentRow?.code }}）</span></el-form-item>
        <el-form-item label="数量"><el-input-number v-model="form.quantity" :min="1" /></el-form-item>
        <el-form-item label="原因"><el-input v-model="form.reason" placeholder="如：质量问题/客户退货" /></el-form-item>
        <el-form-item label="备注"><el-input v-model="form.remark" type="textarea" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" @click="onReturn">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'
import { useReturnStore } from '@/stores/return.js'

const store = useReturnStore()
const filters = reactive({ search: '', range: [] })
const dataList = computed(()=> store.filtered(filters))
onMounted(()=>{ store.initialize() })

function refresh(){}
function exportCsv(){ store.exportReturns(dataList.value) }
</script>

<style scoped>
.page-wrap { padding: 16px; }
.toolbar { display: flex; gap: 12px; margin-bottom: 12px; align-items: center; }
.w-300 { width: 300px; }
</style>


